<template>
    <div class="MyCollection">
        <div>
            <h3 style="margin-bottom:20px;">我的收藏</h3>
            <el-tabs type="border-card" style="width:100%;height:100%"  v-model="activeName" @tab-click="abc()" >
                <el-tab-pane style="height:600px" :label="i.collectionName" :name="i.collectionName" v-for="i in collectionType" :key="i.id" >
                    <el-row class="MyCollection_div" v-for="item in myCollectionList" :key="item.id" @click.native="scenicJump(item.scenicId)">
                        <img :src='`http://127.0.0.1:8082/getImageById?id=${item.scenicAvatarId}`' class="MyCollection_img1">
                        <p style="font-size:14px;margin-top:8px;">{{item.scenicName}}</p>
                        <p style="font-size:14px;margin-top:8px;">￥<span style="color:red;font-weight:bold;font-size:20px;">{{item.scenicPrice}}</span>元</p>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </div>  
    </div>
</template>

<script>
const axios = require('axios')
export default {
    name:'MyCollection',
    data(){
        return{
            //标签页初始化选中
            activeName:"景区",
            //收藏类型集合
            collectionType:[],
            //我的收藏集合
            myCollectionList:[],
            // 当前登录用户Id
            userId:'',
            
        }
    },
    methods: {
        //景区跳转
        scenicJump(scenicId){
            this.$router.push('/ScenicspotDetailsView?id=' + scenicId)
        },
        //选中标签页
        abc(e){
            //查询选中的收藏标签页内容
            this.getMyCollection()
        },
        //消息提示框
        message(message,type){
            this.$message({
                message:message,
                type: type
            });
        },
        //查询收藏类型
        getCollectionTypeName(){
            axios.get('http://127.0.0.1:8082/collectionType/getCollectionTypeName').then(res=>{
                this.collectionType = res.data.obj
                console.log(this.collectionType)
            }).catch(error => {
                this.$message.error('查询收藏类型失败！');
            })
       },

        //查询选中的收藏标签页内容
        getMyCollection(){
            if(this.scenicName!==null){
                axios.get('http://127.0.0.1:8082/collection/getMyCollection',{
                    params: {
                        collectionName: this.activeName,
                        userId: this.userId 
                    }
                }).then(res=>{
                    this.myCollectionList = res.data.obj
                }).catch(error => {
                    this.$message.error('查询我的收藏失败！');
                })
            }
       },
    },
    mounted(){
        // 默认加载获取当前登录用户Id
        this.userId = window.sessionStorage.getItem("id")
        //查询收藏类型
        this.getCollectionTypeName()
        this.getMyCollection()
    }
}
</script>

<style scoped>
.MyCollection_img1{
    width:190px;
    height:190px;

}
.MyCollection_div{
   width:190px;
   height:290px;
   background:#f7f7f7;
   float:left;
   margin-right:20px;
}
.MyCollection_div:hover{
    cursor:pointer;
}
</style>